<template>
  <div class="LevelManage">
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 2 }">

      <a-card class="card" :bordered="false">
        <a-row>
          <a-col :lg="3" :md="8" :sm="24">
            <a-input v-model="danNmuber" style="width: 140px" placeholder="数值" />
          </a-col>
          <a-col :lg="3" :md="8" :sm="24">
            <a-input v-model="danName" style="width: 140px" placeholder="名称" />
          </a-col>
          <a-col :lg="3" :md="8" :sm="24">
            <a-button style="margin-left:10px" type="primary" @click="handleAdd">新建段位</a-button>
          </a-col>
        </a-row>
      </a-card>
    </a-skeleton>
    <br>
    <a-card title="段位管理" class="card" :bordered="false">
      <div>
        <a-table
          :loading="danLoading"
          :columns="columns"
          :dataSource="data"
          :rowKey="data => data.le_id"
        >
          <template slot="le_id" slot-scope="text">{{ text }}</template>
          <template v-for="col in ['le_num','le_name']" :slot="col" slot-scope="text, record">
            <div :key="col">
              <a-input
                v-if="record.editable"
                style="margin: -5px 0"
                :value="text"
                @change="e => handleChange(e.target.value, record.le_id, col)"
              />

              <template v-else>{{ text }}</template>
            </div>
          </template>
          <template slot="handle" slot-scope="text, record">
            <div class="editable-row-operations">
              <span v-if="record.editable">
                <a
                  style="margin-right:15px"
                  @click="() => save(record.le_id,record.le_num,record.le_name)"
                >
                  <a-button type="primary" size="small">保存</a-button>
                </a>
                <a-popconfirm title="确定取消吗?" @confirm="() => cancel(record.le_id)">
                  <a-button type="danger" size="small">取消</a-button>
                </a-popconfirm>
              </span>
              <span v-else>
                <a
                  style="margin-right:15px"
                  :disabled="editingKey !== ''"
                  @click="() => edit(record.le_id)"
                >
                  <a-button type="primary" size="small">修改</a-button>
                </a>
                <a-popconfirm title="确认删除吗?" @confirm="() => onDelete(record.le_id)">
                  <a-button type="danger" size="small">删除</a-button>
                </a-popconfirm>
              </span>
            </div>
          </template>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
import { getLevelList, getAddLevel, setLevelList, delLevel } from '@/api/level'
const columns = [
  {
    title: '活动ID',
    dataIndex: 'le_id',
    width: '10%',
    scopedSlots: { customRender: 'le_id' }
  },
  {
    title: '数值',
    dataIndex: 'le_num',
    width: '25%',
    scopedSlots: { customRender: 'le_num' }
  },
  {
    title: '段位',
    dataIndex: 'le_name',
    width: '25%',
    scopedSlots: { customRender: 'le_name' }
  },
  {
    title: '操作',
    dataIndex: 'handle',
    scopedSlots: { customRender: 'handle' }
  }
]

const data = [
  // {
  //   le_id: 0,
  //   le_num: 1000,
  //   le_name: '塑料'
  // },
  // {
  //   le_id: 1,
  //   le_num: 2000,
  //   le_name: '黑铁'
  // }
]

export default {
  name: 'LevelManage',
  data () {
    this.cacheData = data.map(item => ({ ...item }))
    return {
      skeLoading: true,
      columns,
      danLoading: false,
      data,
      editingKey: '',
      danNmuber: '',
      danName: ''
    }
  },

  computed: {},
  created () {
    this.getLevelList()
  },
  mounted () {},
  methods: {
    getLevelList () {
      this.danLoading = true
      getLevelList({})
        .then(res => {
          this.skeLoading = false
          // console.log('res', res.result)
          this.data = res.result
          this.danLoading = false
        })
        .catch(() => {
          this.skeLoading = false
          this.danLoading = false
          console.log('null')
        })
    },
    getAddLevel (num, val) {
      getAddLevel({
        num: num.toString(),
        name: val
      })
        .then(res => {
          // console.log('res', res)
          this.getLevelList()
        })
        .catch(() => {
          console.log('null')
        })
    },
    setLevelList (key, num, val) {
      setLevelList({
        id: key,
        num: num,
        name: val
      })
        .then(res => {
          // console.log('res', res)
          this.getLevelList()
        })
        .catch(() => {
          console.log('null')
        })
    },
    delLevel (val) {
      delLevel({
        id: val
      })
        .then(res => {
          // console.log('res', res)
          this.getLevelList()
        })
        .catch(() => {
          console.log('null')
        })
    },

    handleAdd () {
      if (this.actTitle !== '') {
        // const count = Math.floor(Math.random() * 10000 + 1)
        // const { data, actTitle } = this
        // const newData = {
        //   le_id: count,
        //   activeTitle: actTitle
        // }
        // this.data = [...data, newData]
        // this.count = count + 1
        this.getAddLevel(this.danNmuber, this.danName)
      } else {
        this.$message.info('标题不能为空!')
      }
    },

    onDelete (key) {
      this.delLevel(key)
    },
    handleChange (value, key, column) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.le_id)[0]
      if (target) {
        target[column] = value
        this.data = newData
      }
    },
    edit (key) {
      // console.log(key)
      const newData = [...this.data]
      const target = newData.filter(item => key === item.le_id)[0]
      // console.log(target)
      if (target) {
        target.editable = true
        this.data = newData
      }
    },
    save (key, num, val) {
      this.setLevelList(key, num, val)
      const newData = [...this.data]
      const newCacheData = [...this.cacheData]
      const target = newData.filter(item => key === item.le_id)[0]
      const targetCache = newCacheData.filter(item => key === item.le_id)[0]
      if (target && targetCache) {
        delete target.editable
        this.data = newData
        Object.assign(targetCache, target)
        this.cacheData = newCacheData
      }
    },
    cancel (key) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.le_id)[0]
      this.editingKey = ''
      if (target) {
        Object.assign(target, this.cacheData.filter(item => key === item.le_id)[0])
        delete target.editable
        this.data = newData
      }
    }
  }
}
</script>

<style lang='less' scoped>
.LevelManage {
  .activeHeader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    height: 20px;
    line-height: 20px;
    .activeAdd {
      width: 750px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .activeAdd-title {
        width: 500px;
      }
    }
    .activeHeadertips {
      color: rgb(194, 194, 189);
      margin-left: 50px;
    }
  }
}
</style>
